<template>
	<view class="content">
		
		<view class="info" v-if="list.length>0" v-for="(item,i) in list">
			<view class="item">
				<view>第{{item.l_key}}期</view>
				<view class="money">应还日期：{{item.repay_date}}</view>
			</view>
			<view class="item2">
				<view>应还利息</view>
				<view class="money">￥{{item.interest_money}}</view>
			</view>
			<view class="item2">
				<view>已还利息</view>
				<view class="money">￥{{item.true_interest_money}}</view>
			</view>
			<view class="item2">
				<view>待还利息</view>
				<view class="money">￥{{item.dai_interest_money}}</view>
			</view>
			<!-- <view class="item2">
				<view>应还日期</view>
				<view class="money">{{item.repay_date}}</view>
			</view> -->
			<view class="item2">
				<view>实还日期</view>
				<view class="money">{{item.true_repay_date}}</view>
			</view>
		</view>
		<image v-if="list.length<1" class="none" src="@/static/img/img_none.png" mode="widthFix"></image>
		
		
	</view>
</template>

<script>
	import {
		userInterestDetails
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				page: 1,
				list: [],
				isAll: false,
				id: '',
				user: '',
				title: ''
			}
		},
		onLoad(e) {
			console.log(e);
			this.user = JSON.parse(e.info)
			this.title = e.title
			uni.setNavigationBarTitle({
				title: this.user.name+e.title
			})
			this.record()
		},
		methods: {
			
			// detail(e) {
			// 	uni.navigateTo({
			// 		url:'/pages/me/topupDetails?info='+JSON.stringify(e)
			// 	})
			// },
			record() {
				userInterestDetails({
					page: this.page,
					user_id: this.user.user_id
				}).then(res => {
					console.log(res);
					// this.money = res.data.total
					var info = this.list
					if (this.page == 1) {
						this.list = res.data.list
					} else {
						this.list = info.concat(res.data.list)
					}
					this.isAll = this.list.length < 10 ? false : true
				})
			}
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				this.record()
			}
		}
	}
</script>


<style scoped lang="scss">
	.content {
		position: relative;
		overflow: hidden;
	}
	.info {
		background-color: white;
		margin: 40rpx 30rpx;
		padding: 0 30rpx 40rpx;
		border-radius: 12rpx;

		.item {
			height: 90rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.item2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.money {
				color: #FF5746;
				font-weight: 500;
				// margin-right: 20rpx;
			}
		}
	}

	.none {
		width: 440rpx;
		display: block;
		margin: 240rpx auto 0;
	}
</style>